<div
  #slideItem
  class="po-slide-item"
  [class.po-slide-item-background-image]="!template && isIEOrEdge"
  [style.background-image]="!template && isIEOrEdge ? 'url(' + image + ')' : ''"
>
  @switch (setLinkType()) {
    <!-- slide com link interno -->
    @case ('internalLink') {
      <a class="po-slide-item-link" [routerLink]="link">
        <ng-container
          [ngTemplateOutlet]="slideItemImage"
          [ngTemplateOutletContext]="{ item: { alt: alt, image: image } }"
        >
        </ng-container>
      </a>
    }
    <!-- slide com link externo -->
    @case ('externalLink') {
      <a class="po-slide-item-link" [href]="link">
        <ng-container
          [ngTemplateOutlet]="slideItemImage"
          [ngTemplateOutletContext]="{ item: { alt: alt, image: image } }"
        >
        </ng-container>
      </a>
    }
    <!-- slide sem link -->
    @case ('noLink') {
      <a
        [ngClass]="action ? 'po-slide-item-link' : 'po-slide-item-no-link'"
        (click)="action ? action(data) : undefined"
      >
        <ng-container
          [ngTemplateOutlet]="template ? slideItemTemplate : slideItemImage"
          [ngTemplateOutletContext]="{ item: { alt: alt, image: image, data: data } }"
        >
        </ng-container>
      </a>
    }
  }
</div>

<ng-template #slideItemTemplate let-item="item" ; let-index="index">
  @if (template) {
    <div class="po-slide-item-content">
      <ng-template
        [ngTemplateOutlet]="template.templateRef"
        [ngTemplateOutletContext]="{ $implicit: item.data, index: index }"
      >
      </ng-template>
    </div>
  }
</ng-template>

<ng-template #slideItemImage let-item="item">
  @if (item.image && !isIEOrEdge) {
    <img class="po-slide-image" [alt]="item.alt" [src]="item.image" [style.height.px]="imageHeight" />
  }
</ng-template>
